<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>内部员工在线考试</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="css/img/favicon.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/odometer.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.min.css">

    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="css/test.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.min.css">
    <style>

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }
        .reading h2 a {
            text-decoration: none;
            color: #59595b;
            font-size: 20px;
        }
        .reading h2 a:hover {
            color: #2183f1;
        }
        .fa-star{
            width: 43px;
            margin-top: 20px;
        }
        .fa-clock-o{
            margin-top: 2px;
        }
        .gcolor{
            background-color: #838B8B;
        }
    </style>
</head>
<body>
<!-- preloader  -->
<div id="preloader">
    <div id="ctn-preloader" class="ctn-preloader">
        <div class="animation-preloader">
            <div class="spinner"></div>
            <div class="txt-loading">
                        <span data-text-preloader="E" class="letters-loading">
                            E
                        </span>
                <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                <span data-text-preloader="S" class="letters-loading">
                            S
                        </span>
                <span data-text-preloader="T" class="letters-loading">
                            T
                        </span>
                <span data-text-preloader="U" class="letters-loading">
                            U
                        </span>
                <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                <span data-text-preloader="Y" class="letters-loading">
                            Y
                        </span>
            </div>
        </div>
        <div class="loader">
            <div class="row">
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- preloader end -->


<!-- Scroll-top -->
<button id="but" class="scroll-top scroll-to-target" data-target="html">
    <i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->
<!-- 头部 -->
<header>
    <div class="header-top-wrap d-none d-md-block">
        <div class="container-fluid container-full">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6">
                    <div class="d-flex align-items-center">
                        <div class="header-top-library">
                            <a href="#">图书馆<i class="fas fa-angle-down"></i></a>
                        </div>
                        <div class="header-top-search">
                            <form action="#">
                                <input type="text" placeholder="搜索...">
                                <button><i class="fas fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="header-right-list">
                        <div class="header-top-social">
                            <ul>
                                <li>联系我们</li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li>
                                    <a href="#"><i class="fab fa-weibo"></i> </a></li>
                                <li><a href="tencent://message/?uin=1092535160&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"><i class="fab fa-qq"></i></a></li>
                                <li id="weixin_hover" ><a href="#"><i class="fab fa-weixin"></i>
                                    <ul>
                                        <img class="qrcode" id="weixin_img"  src="css/img/product/wx_01.png" alt="wx:K15035689083"/>
                                    </ul>
                                </a></li>
                            </ul>
                        </div>
                        <div class="header-user-login">
                            <a href="#"><i class="fas fa-user-circle"></i><span th:text="${session.name}"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#" th:href="@{/logout}"> <i class="fa fa-sign-out"></i><span>注销</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_title">
                        <p class="test_time">
                            <!--下方的倒计时前的图片-->
                            <i class="icon iconfont"></i><b class="alt-1">02:00</b>
                        </p>
                        <font><input type="button" name="test_jiaojuan" value="交卷"
                                     class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"></font>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2  style=" margin-bottom: 0px; margin-top: 13px;">单选题</h2>
                            <p class="gtcolor" >
                                <input type="hidden" id="tishu" th:value="${list.size()}"/>
                                <span>共</span><i class="content_lit" id="tishu" th:value="${list.size()}"  th:text="${list.size()}"></i><span>题，</span><span>合计</span><i class="content_fs" th:text="${list.size()}"></i><span>分</span>
                            </p>
                            <h2 style=" margin-bottom: 0px; margin-top: 13px;padding-left: 300px;">主题风格</h2>
                            <a href="javascript:;" class="tkcolor">
                                <p style="margin-right: 20px; background-color: #389fc3">
                                    <span>天空蓝</span><i class="content_lit"></i>
                                </p>
                            </a>

                            <a href="javascript:;" class="hlcolor">
                                <p style="margin-right: 20px;background-color: orange">
                                    <span>活力橘</span><i class="content_lit"></i>
                                </p>
                            </a>

                            <a href="javascript:;" class="gcolor">
                                <p style="background-color: #838B8B">
                                    <span>高雅灰</span><i class="content_lit"></i>
                                </p>
                            </a>

                        </div>
                    </div>

                    <!--单选题题库-->
                    <div class="test_content_nr">
                        <ul>

                            <li th:id="'qu_0_'+${list.columnss}" th:each="list:${list}">
                                <input type="hidden" th:value="${list.correct}" th:name="'correct'+${list.columnss}" class="correct"/>
                                <div class="test_content_nr_tt">
                                    <i th:text="${list.columnss}"></i><span>(1分)</span><font th:text="${list.context}"></font>

                                   <a href="#" th:onclick="shoucang([[${list.id}]])"><b class="fa fa-star"></b></a>

                                    <script>
                                       function shoucang(id){
                                           $.ajax({
                                               "url":"/shoucang",
                                               "data":"bankid="+id,
                                               "dataType":"text",
                                               "success":function(result){
                                                    alert("收藏成功");
                                               }
                                           });
                                        }
                                    </script>
                                </div>
                                <div class="test_content_nr_main">
                                    <ul>

                                        <li class="option">

                                            <input type="radio" class="radioOrCheck" th:name="'answer'+${list.columnss}" value="A"
                                                   th:id="'0_answer_'+${list.columnss}+_option_1" />
                                            <label th:for="'0_answer_'+${list.columnss}+_option_1">
                                                A.
                                                <p class="ue" style="display: inline;" th:text="${list.A}"></p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" class="radioOrCheck" th:name="'answer'+${list.columnss}" value="B"
                                                   th:id="'0_answer_'+${list.columnss}+_option_2" />
                                            <label th:for="'0_answer_'+${list.columnss}+_option_2">
                                                B.
                                                <p class="ue" style="display: inline;" th:text="${list.B}"></p>
                                            </label>
                                        </li>
                                        <li class="option">
                                            <input type="radio" class="radioOrCheck" th:name="'answer'+${list.columnss}" value="C"
                                                   th:id="'0_answer_'+${list.columnss}+_option_3" />

                                            <label th:for="'0_answer_'+${list.columnss}+_option_3">
                                                C.
                                                <p class="ue" style="display: inline;" th:text="${list.C}"></p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input type="radio" class="radioOrCheck" th:name="'answer'+${list.columnss}" value="D"
                                                   th:id="'0_answer_'+${list.columnss}+_option_4" />

                                            <label th:for="'0_answer_'+${list.columnss}+_option_4" >
                                                D.
                                                <p class="ue" style="display: inline;" th:text="${list.D}"></p>
                                            </label>
                                        </li>

                                    </ul>
                                </div>
                            </li>


<!--测试标记-->

                        </ul>
                    </div>
<!--多选题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>多选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">30</i><span>题，</span><span>合计</span><i class="content_fs">30</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                            <li th:id="'qu_1_'+${lists.columnss}" th:each="lists:${lists}">
                                <div class="test_content_nr_tt" >
                                    <i th:text="${lists.columnss}"></i><span>(1分)</span><font  th:text="${lists.context}"></font><b class="fa fa-star"  aria-hidden="true"></b>
                                </div>

                                <div class="test_content_nr_main">
                                    <ul>

                                        <li class="option">


                                            <input type="checkbox" class="radioOrCheck" th:name="'answer'+${lists.columnss}"
                                                th:id="'1_answer_'+${lists.columnss}+_option_1"/>

                                            <label th:for="'1_answer_'+${lists.columnss}+_option_1">
                                                A.
                                                <p class="ue" style="display: inline;" th:text="${lists.A}"></p>
                                            </label>
                                        </li>

                                        <li class="option">


                                            <input type="checkbox" class="radioOrCheck" th:name="'answer'+${lists.columnss}"
                                                    th:id="'1_answer_'+${lists.columnss}+_option_2"/>

                                            <label th:for="'1_answer_'+${lists.columnss}+_option_2">
                                                B.
                                                <p class="ue" style="display: inline;" th:text="${lists.B}"></p>
                                            </label>
                                        </li>

                                        <li class="option">


                                            <input type="checkbox" class="radioOrCheck" th:name="'answer'+${lists.columnss}"
                                                   th:id="'1_answer_'+${lists.columnss}+_option_3"/>

                                            <label th:for="'1_answer_'+${lists.columnss}+_option_3">
                                                C.
                                                <p class="ue" style="display: inline;" th:text="${lists.C}"></p>
                                            </label>
                                        </li>

                                        <li class="option">


                                            <input type="checkbox" class="radioOrCheck" th:name="'answer'+${lists.columnss}"
                                                   th:id="'1_answer_'+${lists.columnss}+_option_4" />

                                            <label th:for="'1_answer_'+${lists.columnss}+_option_4">
                                                D.
                                                <p class="ue" style="display: inline;" th:text="${lists.D}"></p>
                                            </label>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <!--答题卡前面的图片-->
                            <i class="fa fa-table">答题卡</i>
                        </h1>
                        <p class="test_time">
                            <!--时间倒计时前面的图片-->
                            <i class="fa fa-clock-o"></i><b class="alt-1">02:00</b>
                        </p>
                    </div>
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit" th:text="${list.size()}"></i><span>题</span>
                            </p>
                        </div>
                        <!--单选题答题卡-->
                        <div class="rt_content_nr answerSheet" >
                            <ul>
                                <li th:each="list:${list}"><a th:href="'#qu_0_'+${list.columnss}" th:text="${list.columnss}"></a></li>

                            </ul>
                        </div>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2 style="
                            margin-top: 13px;
                            margin-bottom: 0px;
                            ">多选题</h2>
                            <p>
                                <span>共</span><i class="content_lit" th:text="${lists.size()}"></i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <!--多选题答题卡-->
                            <ul>
                                <li th:each="lists:${lists}"><a th:href="'#qu_1_'+${lists.columnss}" th:text="${lists.columnss}"></a></li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
</div>





<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span>提示</span>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <!-- <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>-->
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer" id="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="guanbi">关闭</button>
                <button type="button" class="btn btn-primary" id="btn-primary">提交</button>
               <!-- <button type="button" class="btn btn-primary" id="cha" style="display: none">查看答案</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- JS here -->
<script src="css/js/vendor/jquery-3.5.0.min.js"></script>
<script src="css/js/popper.min.js"></script>
<script src="css/js/bootstrap.min.js"></script>
<script src="css/js/isotope.pkgd.min.js"></script>
<script src="css/js/imagesloaded.pkgd.min.js"></script>
<script src="css/js/jquery.magnific-popup.min.js"></script>
<script src="css/js/owl.carousel.min.js"></script>
<script src="css/js/jquery.odometer.min.js"></script>
<script src="css/js/jquery-ui.min.js"></script>
<script src="css/js/jquery.appear.js"></script>
<script src="css/js/slick.min.js"></script>
<script src="css/js/ajax-form.js"></script>
<script src="css/js/wow.min.js"></script>
<script src="css/js/aos.js"></script>
<script src="css/js/plugins.js"></script>
<script src="css/js/main.js"></script>
<script src="http://cdn.bootstrapmb.com/jquery/jquery-1.11.1.min.js"></script>
<script src="css/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="css/js/jquery.countdown.js"></script>
<script>


    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });


    $(function () {
        var score=0;
        /*交卷*/
        $('.btn-primary').click(function (){
            var ti=document.getElementById('tishu').value;
            //成绩

            //判断是否有空题
            var demos=true;
            //储存没有填写答案的数组
            var array=new Array();
            //循环判断有没有空题
                for(var i=1;i<=ti;i++){
                //拼接单选框input中的name值
                var s="answer";
                var answer=s.concat(i);
                //获取单选框值
                var radio = $('input[name='+answer+']:checked').val();
                    if(radio==undefined){
                        //将题号保存到数组中
                        array.push(i);
                        //如果有空题就设置false
                        demos=false;
                    }
                }
            //如果没有空题进入判卷
            if(demos){
                for(var i=1;i<=ti;i++){
                    //拼接单选框input中的name值
                    var s="answer";
                    var answer=s.concat(i);
                    //获取单选框值
                    var radio = $('input[name='+answer+']:checked').val();
                    //拼接答案的input中的name值
                    var s1="correct";
                    var correct=s1.concat(i);
                    //alert("单选框值"+radio);
                    //正确答案
                    var trues= $('input[name='+correct+']').val();
                    //alert("正确答案"+trues);
                    if(radio===trues){
                        //alert("单选框值"+radio+"正确答案"+trues);
                        score=score+1;
                    }
                }
                alert("总成绩："+score);
            //有空题的情况
            }else {
                $('.modal-body').html("第"+array[0] + '题还没做，确定要提交吗？');
                for (var j=1;j<=array.length;j++) {
                    guanbi();
                }
            }

        });
        /**
         * 确定提交按钮
         */
        $('#btn-primary').click(function(){
            //alert("提交总成绩为"+score);
            //$('.modal-body').css("<button type='button' class='btn btn-primary'>确认成绩</button>"
            $('.modal-body').html("<h1 >您的总成绩为：</h1><h1 style='color: red'>"+score+"</h1>");

             $('#guanbi').css("display","none");
             $("#btn-primary").css("display","none");
            var node=document.createElement("button");

            $(node).addClass("btn btn-primary");
            var textnode=document.createTextNode("确认成绩");

            node.appendChild(textnode);
            $('#modal-footer').append("<a "+"type='button' class='btn btn-primary' "+'href=/shijuan?score='+score+">确认成绩</a>");

        });

        function queren() {

            location.href="/index";
        }


        $('#guanbi').click(function () {
            $('#guanbi').css("display","inline");
            $("#btn-primary").css("display","inline");

        })

        function guanbi() {

            var ti=document.getElementById('tishu').value;
            score=0;
            for (var i = 1; i <= ti; i++) {
                //拼接单选框input中的name值
                var s = "answer";
                var answer = s.concat(i);
                //获取单选框值
                var radio = $('input[name=' + answer + ']:checked').val();
                //拼接答案的input中的name值
                var s1 = "correct";
                var correct = s1.concat(i);
                //alert("单选框值"+radio);
                //正确答案
                var trues = $('input[name=' + correct + ']').val();
                //alert("正确答案"+trues);
                if (radio === trues) {
                    //alert("单选框值"+radio+"正确答案"+trues);
                    score = score + 1;
                }

            }

        }

        $('li.option label').click(function () {
            // debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });

            $(".tkcolor").click(function(){
                $(".gtcolor").css('background-color','#389fc3');
                $(".rt_nr1_title h1").css('background-color','#389fc3');
                $(".test_title font input").css('background-color','#389fc3');
                $(".test_content_nr_tt i").css('background-color','#389fc3');
                $(".test_content_nr_tt b").css('color','#389fc3');
                $(".hasBeenAnswer").css('background','#5d9cec');

            });
        $(".hlcolor").click(function(){
            $(".gtcolor").css('background-color','orange');
            $(".rt_nr1_title h1").css('background-color','orange');
            $(".test_title font input").css('background-color','orange');
            $(".test_content_nr_tt i").css('background-color','orange');
            $(".test_content_nr_tt b").css('color','orange');
            $(".hasBeenAnswer").css('background','orange');

        });
        $(".gcolor").click(function(){
            $(".gtcolor").css('background-color','#838B8B');
            $(".rt_nr1_title h1").css('background-color','#838B8B');
            $(".test_title font input").css('background-color','#838B8B');
            $(".test_content_nr_tt i").css('background-color','#838B8B');
            $(".test_content_nr_tt b").css('color','#838B8B');
            $(".hasBeenAnswer").css('background','#838B8B');
        });
    });
</script>
</body>
</html>
<!--下面是无用代码-->
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>